//点击 登录/注册 显示登录弹框
var loginBtn = document.querySelector('header .member > div')
loginBtn.onclick = function(){
    var loginDialog = document.querySelector('section.login')
    loginDialog.style.visibility = 'visible'
}

//点击 x 隐藏登录弹框
var closeBtn = document.querySelector('section.login i.icon-close')
closeBtn .onclick = function(){
    var loginDialog = document.querySelector('section.login')
    loginDialog.style.visibility = 'hidden'
}

//按下蓝色区域拖拽
var loginBlueBox = document.querySelector('section.login div.menu')
var loginBlueBox1 = document.querySelector('section.login div.item')
loginBlueBox.onmousedown = function(evt){
    var oldE = evt || window.event
    document.onmousemove = function(e){
        //获取事件对象
        //获取鼠标位置
        //限制边界
        //设置行内样式
        var e = e || window.event
        var left = e.clientX - oldE.offsetX
        var top = e.clientY - oldE.offsetY
        if (left < 0) left = 0 
        if (top < 0) top = 0

        var temp = document.querySelector('section.login div.item')
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - temp.offsetWidth
        var maxTop = (window.innerHeight || document.documentElement.clientHeight) - temp.offsetHeight
        if(left > maxLeft) left = maxLeft
        if(top > maxTop) top = maxTop
        // console.log(oldE.offsetX,oldE.offsetY);

        loginBlueBox1.style.position = 'absolute'
        loginBlueBox1.style.left = left + 'px'
        loginBlueBox1.style.top = top + 'px'
    }
    document.onmouseup = function(){
        document.onmousemove = null
    }
}

//短信倒计时(留心：重复点击会出现BUG)
var captchaBtn = document.querySelector('section.login button.captcha')
var num = 5
captchaBtn.onclick = function(){

    //获取行为验证码弹框
    var captchaObj = document.querySelector('section.captcha')
    captchaObj.style.visibility = 'visible'
    //获取行为验证码关闭按钮，绑定点击事件
    document.querySelector('section.captcha i.icon-close').onclick = function(){
        captchaObj.style.visibility = 'hidden'
    }
    //获取拖拽按钮+绑定鼠标按下事件
    var dragBtn = document.querySelector('section.captcha div.btn')
    dragBtn.onmousedown = function(){
        document.onmousemove = function (evt){
            //获取事件对象
            var e = evt || window.event
            //获取鼠标位置
            //520 为 document.querySelector('section.captcha').offsetLeft
            var left = e.clientX - 520 - dragBtn.offsetWidth/2
            dragBtn.style.left = left + 'px'
            //限制边界
            //同步小方块
            document.querySelector('section.captcha .check img:nth-of-type(2').style.left = left + 'px'
        }
            //松开鼠标停止move
        document.onmouseup = function(){
            document.onmousemove = null
            //判断位置是否拖拽正确(260~265之间验证通过)
            var value = parseInt(dragBtn.style.left)
            if (value >= 260 && value <= 265) {
                //处理函数 - 将页面按钮文字改成【5秒后重发】
            captchaBtn.innerText = num + '秒后重发'
            captchaBtn.disabled = true
            t = setInterval(function(){
               //判断停止定时器
               if (num <= 1){
                clearInterval(t)
                captchaBtn.innerText ='重新发送'
                num = 5
                captchaBtn.disabled = false
                return
               }
               num--
               captchaBtn.innerText = num + '秒后重发'
           },1000)
           document.querySelector('section.captcha').style.visibility = 'hidden'
            }
            //重置还原到初始状态
            dragBtn.style.left = '0px' 
            document.querySelector('section.captcha .check img:nth-of-type(2').style.left ='0px'
        }
    }
    return
}

//登录表单验证
var loginSubmitBtn = document.querySelector('section.login button.submit')
var mobileObj = document.querySelector('section.login input.mobile')
var passwordObj = document.querySelector('section.login input.password')
var msg1 = document.querySelector('section.login .form > p:nth-of-type(3)')
var msg2 = document.querySelector('section.login .form > p:nth-of-type(4)')
loginSubmitBtn.onclick = function(){
    var isOk = 0

    if (mobileObj.value == '' || mobileObj.value.length !== 11 || !Number(mobileObj.value)){
        msg1.innerText = '手机格式有误'
    }else{
        isOk ++
        msg1.innerText = ''
    }
    if (passwordObj.value == '' || passwordObj.value.length !== 4 || !Number(passwordObj.value)){
        msg2.innerText = '验证码错误'
    }else{
        isOk ++
        msg2.innerText = ''
    }
    //都验证成功 - 弹框表单提交
    if (isOk == 2){
        alert('登陆成功')
    } 
}